<template>
  <div class="item flex" @click="toDetail()">
    <!-- 课程封面 -->
    <image class="item_courseImg" :src="item.coursePic"></image>
    <!-- 课程信息 -->
    <div class="item_info">
      <!-- 课程信息-名称 -->
      <div class="flexcolcenter item_type_name">
        <courseType :type="item.type" class="item_type"></courseType>
        <div class="item_name overtxt">
          {{ item.courseName }}
        </div>
      </div>
      <!-- 课程信息-学时 -->
      <div class="item_credit_time">
        <text class="item_credit"
          >{{ item.credit ? item.credit : "--" }}学分</text
        >|{{ item.studyTime ? item.studyTime : "--" }}时
      </div>
      <!-- 课程信息-工作站信息 -->
      <div class="flexcolcenter item_workstationInfo">
        <image
          class="item_workstationInfo_icon"
          src="/static/images/course/icon2.png"
        ></image>
        <div class="item_workstationInfo_value overtxt">
          {{
            item.workstationList && item.workstationList.length > 0
              ? item.workstationList[0].workstation_name
              : item.workstationName
              ? item.workstationName
              : "暂无关联"
          }}
        </div>
        <image
          class="item_workstationInfo_icon"
          src="/static/images/course/icon1.png"
        ></image>
        <div class="item_workstationInfo_value overtxt">
          {{
            item.principalName
              ? item.principalName
              : item.principalname
              ? item.principalname
              : ""
          }}
        </div>
        <image
          class="item_workstationInfo_icon"
          src="/static/images/course/icon3.png"
        ></image>
        <div class="item_workstationInfo_value">
          {{ item.finishTasks ? item.finishTasks : 0 }}/{{
            item.allTasks ? item.allTasks : 0
          }}
        </div>
      </div>
      <!-- 课程信息-学习进度 -->
      <div class="item_progressContain flexcolcenter" v-if="type == 'studying'">
        <div class="item_progressContain_lable">学习进度</div>
        <div class="item_progress">
          <van-progress
            pivot-text=""
            color="#ff4d03"
            :percentage="parseInt(item.percentage.replace('%', ''))"
          />
        </div>
        <div class="item_progressContain_value">{{ item.percentage }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import courseType from "@/components/courseType.vue";
export default {
  components: { courseType },
  props: {
    type: String,
    item: [Object, String],
  },
  name: "index",
  mounted() {},
  methods: {
    toDetail() {
      console.log(this.item);
      uni.navigateTo({
        url: `/pages/selectiCourse/courseDetail?courseId=${this.item.courseId}&courseSchedulingId=${this.item.courseSchedulingId}`,
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.item {
  background: white;
  box-sizing: border-box;
  padding: 32rpx;
  .item_courseImg {
    box-sizing: border-box;
    border-radius: 16rpx;
    border: 1rpx solid #fafafa;
    width: 214rpx;
    height: 136rpx;
  }
  .item_info {
    margin-left: 24rpx;
    .item_type_name {
      margin-top: 2rpx;
      height: 42rpx;
      .item_type {
      }
      .item_name {
        margin: 0 20rpx;
        font-size: 30rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        max-width: 270rpx;
      }
    }
    .item_credit_time {
      height: 34rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 34rpx;
      .item_credit {
        color: #fb9a55;
      }
    }
    .item_workstationInfo {
      margin-top: 16rpx;
      height: 34rpx;
      .item_workstationInfo_icon {
        width: 26rpx;
        height: 27rpx;
        margin-right: 10rpx;
      }
      .item_workstationInfo_value {
        margin-right: 10rpx;
        width: 100rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
    }
    .item_progressContain {
      margin-top: 32rpx;
      height: 34rpx;
      .item_progress {
        width: 245rpx;
      }
      .item_progressContain_lable {
        margin-right: 10rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
      .item_progressContain_value {
        margin-left: 10rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff4d03;
      }
    }
  }
}
</style>

